<template>
  <div>
    <!-- 使用vuex中的数据 -->

    <h3>这是根组件 - {{ sNum }}</h3>
    <p>没有格式化的金额：{{ sMon }}</p>
    <p>格式化之后的金额是：{{ sForMatMon }}</p>

    <p>
      <button @click="fn1">点击触发请求数据</button>
    </p>

    <p>当前请求的数据一共有{{ sArrNum }}条</p>
    <ul>
      <li v-for="item in $store.state.list" :key="item.id">
        <!-- {{ item }} -->
        <h4>{{ item.title }}</h4>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    async fn() {
      const data = await this.$store.dispatch('getData1')
      console.log(data)
    },
    fn1() {
      this.$store.dispatch('getData')
    },
    addNum() {
      this.$store.commit('ADD_MON')
    }
  },
  computed: {
    sNum() {
      return this.$store.state.num
    },
    sMon() {
      return this.$store.state.money
    },
    sForMatMon() {
      return this.$store.getters.formatM
    },
    sArrNum() {
      return this.$store.getters.arrNum
    }
  }
}
</script>
